<template>
  <div>
    <el-card>
      <!--卡片头部-->
      <div slot="header">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item>
            <el-input label="id" v-model="dataForm.key" placeholder="订单id或商品id" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-select label="订单状态" clearable v-model="dataForm.status" placeholder="订单状态">
              <el-option v-for="item in statusMap" :key="item.value" :value="item.value" :label="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
            <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除
            </el-button>
          </el-form-item>
        </el-form>

      </div>
      <div>
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
                  style="width: 100%;">
          <el-table-column type="selection" header-align="center" align="center" width="50">
          </el-table-column>
          <el-table-column prop="id" header-align="center" align="center" label="订单id">
          </el-table-column>
          <el-table-column prop="productId" header-align="center" align="center" label="商品id">
          </el-table-column>
          <el-table-column prop="userId" header-align="center" align="center" label="用户id">
          </el-table-column>
          <el-table-column width="200px" prop="createTime" header-align="center" align="center" label="创建时间">
          </el-table-column>
          <el-table-column width="200px" prop="payTime" header-align="center" align="center" label="支付时间">
          </el-table-column>
          <el-table-column prop="status" header-align="center" align="center" label="支付状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 0">待支付</span>
              <span v-else-if="scope.row.status === 1">已支付</span>
              <span v-else>支付失败</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="orderDetailHandle(scope.row.id)">详情</el-button>
              <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <br>

        <!--Pagination 分页-->
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                       :current-page="pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total=totalPage>
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <order-detail v-if="orderDetailVisible" ref="orderDetail" @refreshDataList="getDataList"></order-detail>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";
import OrderDetail from "./order-details";

export default {
  //import引入的组件需要注入到对象中才能使用
  name: "OrderView.vue",
  components: {OrderDetail},

  data() {
    return {
      statusMap: [
        {
          value: 0,
          label: '待支付',
        },
        {
          value: 1,
          label: '已支付',
        },
        {
          value: 2,
          label: '支付失败',
        }
      ],
      dataForm: {
        key: '',
        status: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      orderDetailVisible: false,
    };
  },

  methods: {
    orderDetailHandle(id) {
      this.orderDetailVisible = true
      this.$nextTick(() => {
        this.$refs.orderDetail.init(id)
      })
    },

    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      request.get('/order/admin/list', {
        params: {
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key,
          status: this.dataForm.status
        }
      }).then((data) => {
        if (data && data.data.code === 200) {
          this.dataList = data.data.page.list
          this.totalPage = data.data.page.totalCount
        } else {
          this.$message.error(data.data.msg)
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },

    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },

    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },

    // 删除
    deleteHandle(id) {
      const ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      });
      this.$confirm(`确定对[订单${ids.join(',')}]进行${id ? '删除' : '批量删除'}操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.post('/order/admin/delete', ids).then(res => {
          if (res.data && res.data.code === 200) {
            this.$message.success("删除成功")
            this.getDataList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {
      })//用户点击取消
    },
  },

  created() {
    this.getDataList()
  },
}
</script>
<style scoped>
@import "@/css/global.css";
</style>